<template>
  <div>
    <el-image
      v-if="type=='pic-card'" 
      :style="{width: width+'px',height:height+'px'}"
      :src="src" 
      :preview-src-list="srcList">
    </el-image>
    <div class="online" v-if="type=='pic-list'" @click="showViewer=true" style="cursor:pointer">{{name}}</div>
    <el-image-viewer
    v-if="showViewer"
    :on-close="closeViewer"
    :url-list="srcList"/>
  </div>
</template>

<script>
import Vue from 'vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
Vue.use(ElImageViewer)
export default {
  components:{
    ElImageViewer
  },
  name:'Picture',
  data(){
    return{ 
      src:'',
      showViewer:false,
      srcList:[]
    }
  },
  props:{
    name:{
      type:String,
    },
    type:{
      type:String,
      default:'pic-card'
    },
    url:{
      type:String||Array,
      require:true
    },
    list:{
      type:Array
    },
    width:{
      type:String,
      default:'100',
    },
    height:{
      default:'100',
      type:String
    }
  },
  watch:{
    url:{
      handler(newval){
        this.src = newval
        // if(newval&&newval.length>0){
        //   this.srcList = newval
        // }else{
          this.srcList = [this.src]
        // }
      },
      immediate:true
    },
    // list:{
    //   handler(newval){
    //     if(newval&&newval.length>0){
    //       this.srcList = newval
    //     }
    //   },
    //   immediate:true
    // }
  },
  methods:{
    closeViewer(){
      this.showViewer=false
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.el-image__inner) {
  object-fit: cover !important;
}
</style>